<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Links Network package history</title>

    <style>
      body {
        font: 10pt arial; 
      }
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../network.js"></script>
    
    <script type="text/javascript">
      var nodesTable = null;
      var linksTable = null;
      var network = null;
      
      google.load('visualization', '1');
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(draw); 

      // Called when the Visualization API is loaded.
      function draw() {
        // Create and populate a data table.
        var idStart = 0,
            idEnd = 1;
        nodesTable = new google.visualization.DataTable();
        nodesTable.addColumn('number', 'id');
        nodesTable.addColumn('string', 'text');
        nodesTable.addColumn('string', 'title');
        nodesTable.addColumn('string', 'action');
        nodesTable.addColumn('datetime', 'timestamp');
        nodesTable.addRow([idEnd, 'End', 'This is the <b>end</b> node', undefined, undefined]);
        nodesTable.addRow([idStart, 'Start', 'This is the <b>start</b> node', undefined, undefined]);
        
        var idLink = 0;
        linksTable = new google.visualization.DataTable();
        linksTable.addColumn('number', 'id');
        linksTable.addColumn('number', 'from');
        linksTable.addColumn('number', 'to');        
        linksTable.addColumn('string', 'title');        
        linksTable.addColumn('number', 'length');        
        linksTable.addColumn('string', 'action');
        linksTable.addColumn('datetime', 'timestamp');
        linksTable.addRow([idLink, idStart, idEnd, 
          'This is the <b>link</b> between<br>start and end node<br><br>' +
          '<a href="http://www.almende.com" target="_blank">Click here</a> to go to the Almende website<br>' +
          '<a href="javascript: alert(\'Just because we can\');">why?</a>'
          , 300, undefined, undefined]);
        
        // create a history with packages
        packagesTable = new google.visualization.DataTable();
        packagesTable.addColumn('number', 'id');
        packagesTable.addColumn('number', 'from');
        packagesTable.addColumn('number', 'to');
        packagesTable.addColumn('string', 'title');
        packagesTable.addColumn('number', 'progress');
        packagesTable.addColumn('string', 'action');
        packagesTable.addColumn('datetime', 'timestamp'); 
        packagesTable.addColumn('number', 'duration'); 
        packagesTable.addColumn('string', 'color');
        
        // create packages
        var nodeCount = 3;
        var stepCount = 50;
        var hour = 1000 * 60 * 60;
        var second = 1000;
        var timestamp = new Date();
        var n = 0;
        while (n < nodeCount) {
          var t = new Date(timestamp.getTime());
          var c = 0;
          while (c < stepCount + 1) {
            var progress = c / stepCount;
            var action = 'create';
            var title = 'Package <b>' + n + '</b> at ' + Math.round(progress * 100) + '%<br>' +
                '<span style="color:gray;">(' + t + ')</span>';
            var duration = undefined;
            packagesTable.addRow([n, 0, 1, title, progress, action, new Date(t), duration, color]);

            c += 1;
            t = new Date(t.getTime() + second);
          }
          var title = undefined;
          var action = 'delete';
          var duration = undefined;
          var color = undefined;
          packagesTable.addRow([n, 0, 1, title, progress, action, new Date(t), duration, color]);
          
          timestamp = new Date(timestamp.getTime() + (stepCount/3) * second);
          n++;
        }
        
        var title = 'Package with auto progress';
        var progress = undefined;
        var action = 'create';
        var timestamp = new Date();
        var duration = 4*60; // seconds
        var color = 'red';
        packagesTable.addRow([123, 0, 1, title, progress, action, timestamp, duration, color]);
        d = new Date(timestamp);
        
        // specify options
        options = {
          'width': '600px',
          'height': '300px',
          'stabilize': false
        };

        // Instantiate our graph object.
        network = new links.Network(document.getElementById('mynetwork'));

        // Draw our graph with the created data and options 
        network.draw(nodesTable, linksTable, packagesTable, options);
      }
   </script>
  </head>

  <body>
    <table align="center">
      <tr>
        <td>
          <div id="mynetwork"></div>
        </td>
      </tr>
      <tr>
        <td>
          <form onsubmit="javascript: network.setAnimationAcceleration(this.acc.value); return false;">
            Animation acceleration (1 is real time): <input type="text" name="acc" id="acc" value="100" style="width: 50px;">
            <input type="submit" value="Set">
          </form>
          <i>Or</i>
          <form onsubmit="javascript: network.setAnimationDuration(this.duration.value); return false;">
            Animation duration (seconds): <input type="text" name="duration" id="duration" value="5" style="width: 50px;">
            <input type="submit" value="Set">
          </form>

        </td>
      </tr>
    </table>
    
    <div id="info"></div>
  </body>
</html>
